<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪对象选择器</title>
		<style type="text/css">
			/* 内容之前添加一个伪元素
			 * 必须设置content调用出来，即使值为空也要写
			 * 这个伪元素是行内元素
			 *  */
			.p1::before{
				content:"before";
				display:block;
				color:red;
			}
			/*在内容之后*/	
				.p1::after{
				content:"after";
				display:block;
				color:blue;
			}
			/*控制第一个字母*/
			.p2::first-letter{
				font-size: 30px;
			}
			/*控制第一行(文本节点)*/
			.p2::first-line{
				color:orange;
			}
			/*控制placeholder的样式
			 webkit 		::-webkit-input-placeholder
			 moz 			:-moz-placeholder
			 moz(19+) 		::-moz-placeholder
			 ie 			:-ms-input-placeholder
			 
			 问题：同时设置时会互相覆盖
			 * */
			input::-webkit-input-placeholder,
			input::placeholder
			{
				color:red;
			}
			
			/*控制选中文本时的样式*/
			.p2::selection{
				background-color:red;
			}
		</style>
	</head>
	<body>
		<p class="p1">P标签</p>
		
		<p class="p2">
			p2 也是一个标签<br>
			p2 也是一个标签<br>
			p2 也是一个标签<br>
		</p>
		
		<input type="text" placeholder="请输入"  />
	</body>
</html>
